<template>
	<view>
		<view class="header">
			<view class="u-flex-nowrap u-row-between u-flex page-font">
				<view class="u-flex">请输入工位信息(工段编号+工位标识)或扫码</view>
			</view>
			<view class="u-flex-nowrap u-row-around u-flex page-font">
				<u-form class="u-flex u-flex-nowrap u-row-around">
					<u-form-item>
						<u-input v-model="scanResult" :type="type" height=50 placeholder="请输入工位信息" clearable />
					</u-form-item>
					<u-form-item class="u-flex u-row-center">
						<u-button size="medium" type="success" @click="bindUser">绑定</u-button>
					</u-form-item>
				</u-form>
				<view class="u-flex-nowrap u-flex-col u-row-center u-col-center" @click="scanFun">
					<u-icon name="scan" color="#2979ff" size="100"></u-icon>
					<view class="$u-type-primary">点击扫码</view>
				</view>
			</view>
		</view>
		
		<!-- 员工已经绑定的工位列表 -->
		<view>
			<view class="list-item-wrapper" v-bind:id="index" v-for="(item,index) in bindList" :key="index">
				<view class="list-item">
					<view>工序名称</view>
					<view>{{item.processName}}</view>
				</view>
				<view class="list-item">
					<view>产品名称</view>
					<view>{{item.produceName}}</view>
				</view>
				<view class="list-item">
					<view>工位所需的部门</view>
					<view>{{item.department==null?'无':item.department}}</view>
				</view>
				<view class="list-item">
					<view>工位所需职级</view>
					<view>{{item.mastJobClass==null?'无':item.mastJobClass}}</view>
				</view>
				<view class="list-item">
					<view>员工职级</view>
					<view>{{item.jobClass==null?'无':item.jobClass}}</view>
				</view>	
				<view class="list-item">
					<view>员工工号</view>
					<view>{{item.jobNumber}}</view>
				</view>
				<view class="list-item">
					<view>工段编号</view>
					<view>{{item.sectionNo}}</view>
				</view>
				<view class="list-item">
					<view>工位标识</view>
					<view>{{item.stationIdentifying}}</view>
				</view>	
				<view class="u-flex u-row-center">
					<u-button size="medium" type="warning" @click="secondConfirm(item.stationIdentifying,item.stationId,item.sectionNo, index)">解绑</u-button>
				</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
		<u-modal v-model="show" :content="content" :async-close="true" :show-cancel-button="cancleBtn" @cancel="cancel" @confirm="confirm"></u-modal>
		<!-- QC阅读ECN文件 -->
		<u-popup v-model="showReadpdf" mode="center" border-radius="14" :mask-close-able="false">
			<view style="width: 560rpx;padding: 20rpx;">
				<view class="readTitle">请先阅读文档</view>
				<view class="fileName" user-select="true">{{ecnUrl}}<u-button size="mini" @click="copyUrl">复制</u-button></view>
				<view class="u-flex u-row-around" style="margin-top: 30rpx;">
					<u-button type="default" @click="cancelRead">取消</u-button>
					<u-button :type="buttonType" @click="overRead">{{timeCount>0?'('+timeCount +'s' + ')':''}}我已阅读</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { userBind, userUnbind, userBindList,getBoardSectionInfo,findIsEcnFirst } from '../utils/index.js'
	export default {
		data() {
			return {
				scanResult: '',		//条形码包含的字符串信息
				bindList: [],		//员工已经绑定工位的列表
				content: '是否确定解除该工位的绑定',		//弹出框的提示信息
				show: false,			//弹出框是否显示的条件
				cancleBtn: true,		//弹出框的“取消”按钮显示条件
				unBindInfo: {			//解绑时需要向后台发送的信息
					stationIdentifying: '',	//工位标识（替换stationSerial（工位序号））
					stationId: '',		//工位ID
					sectionNo: '',		//工段编号
					index: ''			//表单的序号，该参数主要是将解绑的数据从DOM中删除
				},
				showReadpdf: false,
				pdfUrl: '',
				buttonType: 'default',
				timeCount: 120,
				timer: '',
				user: uni.getStorageSync('user'),
				ecnUrl: '',
				cancelObj: {}
			}
		},
		methods: {
			// 点击按钮，启用扫码函数
			scanFun() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,							//扫码只能通过相机，不可在手机相册获得二维码
					success: function (res) {
						that.scanResult = res.result				//将扫码获得的内容赋值给scanResult
					},
					fail() {
						console.log('识别失败')
					}
				})
			},
			// 绑定工位函数
			async bindUser() {
				const {data} = await userBind({barCode: this.scanResult})
				const errMsg = data.msg
				if(data.code == '1') {
					if(data.data.processName == 'QC' || data.data.processName == 'qc' || data.data.processName == 'qC' || data.data.processName == 'Qc'){
						this.getEC(data.data)
						return console.log('QC绑定工位，需要调用获取是否首产接口')
					}
					this.getBindInfo()
					this.$refs.uTips.show({
						title: '绑定成功',
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// QC已完成阅读ECN文档
			async overRead(){
				if(this.buttonType != 'success') return
				this.showReadpdf = false
				this.timeCount = 120
				this.buttonType = 'default'
				this.ecnUrl = ''
				this.getBindInfo()
				this.$refs.uTips.show({
					title: '绑定成功',
					type: 'success',
					duration: '2000'
				})
				clearInterval(this.timer)
				console.log('已完成阅读ECN文档')
			},
			// 获取是否为EC首产
			async getEC(item){
				let { data } = await getBoardSectionInfo({sectionNo: item.sectionNo})
				console.log('EC首产',data)
				let errormsg = data.msg
				if(data.code == '1') {
					//isEcnFirst
					//首产1，获取ECN文档
					//非首产0，直接绑定工位
					if(data.data.isEcnFirst == '1'){
						this.cancelObj = item
						this.getReadpdf(data.data.produceNo)
					} else {
						this.getBindInfo()
						this.$refs.uTips.show({
							title: '绑定成功',
							type: 'success',
							duration: '2000'
						})
					}
				} else {
					this.$refs.uTips.show({
						title: errormsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 获取ECN文档
			async getReadpdf(val){
				let { data } = await findIsEcnFirst({produceNo: val})
				let errormsg = data.msg
				console.log('ECN文档',data)
				if(data.code == '1') {
					this.ecnUrl = data.data.ecnUrl
					let that = this
					if(!that.showReadpdf){
						that.showReadpdf = true
						clearInterval(that.timer)
						that.timer = setInterval(function(){
							that.timeCount--
							if(that.timeCount<=0){
								that.buttonType = 'success'
								clearInterval(that.timer)
							}
						},1000)
					}
				} else {
					this.$refs.uTips.show({
						title: errormsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			copyUrl(){
				uni.setClipboardData({
					data: this.ecnUrl,
					success: function () {
						console.log('success');
					}
				});
			},
			// 弹出框“确认”解绑的函数
			confirm() {
				this.unbindUser(this.unBindInfo)
				this.show = false
			},
			// 弹出框“取消”解绑的函数
			cancel() {
				this.show = false
			},
			cancelRead(){
				this.showReadpdf = false
				this.timeCount = 120
				this.unbindUser({
					stationIdentifying: this.cancelObj.processName,
					stationId: this.cancelObj.stationId,
					sectionNo: this.cancelObj.sectionNo,
					index: 0,
				})
				clearInterval(this.timer)
			},
			// 解绑按钮绑定的函数
			// 点击“解绑”，调用函数打开的是对话框让用户确认
			//将对应的解绑信息复制给unBindInfo对象
			secondConfirm(stationIdentifying, stationId, sectionNo, index) {
				this.show = true
				this.unBindInfo = {stationIdentifying, stationId, sectionNo, index}
			},
			// 解绑员工工位
			async unbindUser({stationIdentifying, stationId, sectionNo, index}) {
				const quest = {}
				quest.stationIdentifying = stationIdentifying
				quest.stationId = stationId
				quest.sectionNo = sectionNo
				const {data} = await userUnbind(quest)
				if(data.code == '1') {
					if(this.cancelObj.processName) {
						this.cancelObj = {}
						console.log('QC未阅读，解绑工位，解绑成功')
						return
					}
					this.bindList.splice(index,1)							//解绑成功后将数据从DOM中去除
					this.$refs.uTips.show({
						title: '解绑成功',
						type: 'success',
						duration: '2000'
					})
				} else {
					if(this.cancelObj.processName) {
						this.cancelObj = {}
						console.log('QC未阅读，解绑失败')
						return
					}
					this.$refs.uTips.show({
						title: '解绑失败',
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 获得已经绑定的工位信息
			async getBindInfo() {
				const {data} = await userBindList()
				this.bindList = data.data
			}
		},
		// 在进入页面时就从后台请求获取绑定工位的信息
		onLoad() {
			this.getBindInfo()
		},
		// 下拉获取绑定信息
		onPullDownRefresh() {
			this.getBindInfo()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			},3000)
		},
		onHide() {
		}
	}
</script>

<style lang="scss" scoped>
.page-font {
	font-size: 32rpx;
}
.list-item-wrapper {
	margin: 30rpx;
	background-color: #FFEFD5;
}
.list-item {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin: 10rpx 10rpx;
}
.readTitle{
	font-size: 32rpx;
	text-align: center;
	margin-bottom: 30rpx;
}
.fileName{
	word-wrap: break-word;
	font-size: 30rpx;
	color: #2979ff;
}
</style>
